<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="form">
        <view class="form-item-title">
          <view class="title">
            <view class="text">账户信息</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 户主姓名 </view>
            <input class="input" v-model="form.accountName" type="text" placeholder="请填写户主姓名" />
          </view>
          <view class="line" />
        </view>

        <!-- 银行名称 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 银行名称 </view>

            <picker pickerstyle="flex: 1" @change="bindPickerChange" :value="scale.index" :range="scale.array">
              <view class="desc"> {{ scale.currentValue }}</view>
              <view class="arrows">
                <image src="@/static/images/emterpriseMineImg/arrow-right.png" mode="aspectFit|aspectFill|widthFix"
                  lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 开户行 </view>
            <view class="i_box">
              <input type="text" placeholder="请输入" :value="form.bankBranch" @input="changeBankBranch">
              <view v-if="showBranchNameList" class="branchNameListSty">
                <view v-if="branchNameList.length" class="b_item">
                  <view v-for="item in branchNameList" :key="item" @click="handleSelectName(item)">
                    {{ item.branchName }}
                  </view>
                </view>
                <view v-else class="b_text">无数据</view>
              </view>
            </view>
          </view>
          <view class="line" />
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 银行账号  </view>
            <input class="input" type="text" placeholder="请输入账户银行" v-model="form.accountNumber" />
          </view>
          <view class="line" />
        </view>
      </view>

      <view class="submit" @click="submit">
        <text class="text"> 保存 </text>
      </view>
      <view style="height: 200rpx" />
    </scroll-view>
  </view>
</template>

<script>
import { getBalanceDetails, putWealthInfo } from "@/api/subPage/mine";
import { getBankList, getBankListItem } from "@/api/common.js";
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "银行账户",
      },

      items: [],
      value: "",
      code: "",

      scale: {
        bankList: [], // 后端数据
        array: [], // label
        index: 0,
        currentValue: "请选择银行", // 初始显示的
      },

      //表单提交
      form: {
        enterpriseId: "",

        // 账号
        accountNumber: "",
        // 户名
        accountName: "",
        // 银行名称
        bank: "",
        // 所属支行
        bankBranch: "",
      },
      fileList: [],
      showBranchNameList: false,
      bankItemArr: [],
      branchNameList: []
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad({ id }) {
    if (id) this.form.enterpriseId = id;
    this.getDetails();
  },
  onShow() { },
  onReady() { },
  methods: {
    toPath(path) {
      if (path === "") return;

      uni.navigateTo({
        url: `/${path}`,
      });
    },
    async getDetails() {
      // 银行列表
      const res = await getBankList();
      console.log(res.data);
      this.scale.array = res.data.map((item) => item.bankName);
      this.scale.bankList = res.data;

      // 回显
      const { data, code } = await getBalanceDetails();
      if (code === 200) this.form = data;
      this.scale.currentValue = this.scale.bankList.find(
        (v) => v.id === data.bank
      ).bankName;
    },
    changeBankBranch(e) {
      this.branchNameList = []
      this.form.bankBranch = e.detail.value
      if (e.detail.value) {
        this.showBranchNameList = true
        this.bankItemArr.forEach((res) => {
          if (res.branchName.indexOf(this.form.bankBranch) !== -1) {
            console.log(res.branchName, this.form.bankBranch);
            this.branchNameList.push(res)
          }
        })
      } else {
        this.showBranchNameList = false
      }
    },
    // 选中分行
    handleSelectName(item) {
      this.form.bankBranch = item.branchName
      this.showBranchNameList = false
    },

    //提交
    async submit() {
      if (timer) clearTimeout(timer);
      const { code } = await putWealthInfo(this.form);

      let timer = null;
      if (code === 200) {
        uni.showToast({
          title: "保存账户成功",
          icon: "success",
        });

        timer = setTimeout(() => {
          uni.navigateBack({
            success: () => {
              delta: 1;
            },
            //失败回调直接返回我的
            fail: () => {
              uni.switchTab({
                url: "/pages/tabbarChange/mine/index",
              });
            },
          });
        }, 1500);
      }
    },

    async bindPickerChange(e) {
      let that = this
      this.showBranchNameList = false
      this.scale.index = e.detail.value; // 索引
      this.scale.currentValue = this.scale.bankList[this.scale.index].bankName; //label
      this.form.bank = this.scale.bankList[this.scale.index].id;
      const bankName = this.scale.bankList[this.scale.index].bankName; // 提交ID
      getBankListItem(bankName).then((res) => {
        this.$nextTick(() => {
          that.bankItemArr = res.data
          // 解决数据更新但是dom没更新的问题
          this.$forceUpdate();
        })
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32rpx;

    .form {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }
    }

    .form-1 {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 24rpx;
          margin-right: 24rpx;

          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {}
        }
      }
    }

    .submit {
      width: 420rpx;
      height: 88rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: 64rpx;

      .text {
        height: 45rpx;

        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        letter-spacing: 0;
      }
    }
  }
}

.i_box {
  position: relative;
  width: calc(100% - 180rpx);

  .branchNameListSty {
    position: absolute;
    top: 60rpx;
    left: 0;
    background: #fff;
    width: 500rpx;
    min-height: 120rpx;
    max-height: 400rpx;
    z-index: 99;
    border: 1px solid #e2e2e2;
    border-radius: 20rpx;
    overflow: auto;

    .b_item {
      color: #00000073;
      font-size: 24rpx;

      >view {
        margin: 20rpx;
      }
    }

    .b_text {
      min-height: 120rpx;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
